<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<t:template>

<script type="text/javascript" src="site/js/maps_distance.js"></script>

<script>
window.onload = loadScript;

makeDropDownSelector('barrioOrig', 'barrio', null, true);

makeDropDownSelector('barrioDest', 'barrio', null, true);


function initialize() {
	geocoder = new google.maps.Geocoder();
	
	var opts = {
        center: new google.maps.LatLng(-34.6047139, -58.4021210999),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    map = new google.maps.Map($('#map')[0], opts);
}
 
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyBUP3Hs9PaOKAn7DjHGPWfeosglumrlTe0&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

//action="cliente?action=pedir"
</script>

<form name="formMain" id="formMain" method="post"  onSubmit="obtenerChofer();">
	
		<div class="container_14" style="margin-left: 0px;">
	
			<div class="grid_7 alpha box">
				<div class="grid_3 alpha">
					Nombre Pasajero
				</div>
				<div class="grid_4 omega">
					<input type="text" name="pasajero" id="pasajero" value="" class="text"  maxlength="128"><br>
				</div>
				<div class="grid_3 alpha">
					&nbsp;
				</div>
				<div class="grid_4 omega">
					&nbsp;
				</div>
				
				<div class="grid_3 alpha">
					Calle origen
				</div>
				<div class="grid_4 omega">
					<input type="text" name="calleOrig" id="calleOrig" value="" class="text"  maxlength="128"><br>
				</div>
				
				<div class="grid_3 alpha">
					Altura
				</div>
				<div class="grid_4 omega">
					<input type="text" name="alturaOrig" id="alturaOrig" value="" class="text"  maxlength="124"><br>
				</div>
				
				<div class="grid_3 alpha">
					Barrio Origen
				</div>
				<div class="grid_4 omega">
					<select name="barrioOrig" id="barrioOrig"></select><br>
				</div>
				
			</div>
			
			<div class="grid_7 omega box">
				<div class="grid_3 alpha">
					&nbsp;
				</div>
				<div class="grid_4 omega">
					&nbsp;
				</div>
				<div class="grid_3 alpha">
					&nbsp;
				</div>
				<div class="grid_4 omega">
					&nbsp;
				</div>
				
				<div class="grid_3 alpha">
					Calle destino
				</div>
				<div class="grid_4 omega">
					<input type="text" name="calleDest" id="calleDest" value="" class="text"  maxlength="124"><br>
				</div>
				<div class="grid_3 alpha">
					Altura
				</div>
				<div class="grid_4 omega">
					<input type="text" name="alturaDest" id="alturaDest" value="" class="text"  maxlength="124"><br>
				</div>
				<div class="grid_3 alpha">
					Barrio Destino
				</div>
				<div class="grid_4 omega">
					<select name="barrioDest" id="barrioDest"></select><br>
				</div>
			</div>
			
		</div>
		
		<input type="hidden" name="id" id="id" value="">
		<input type="hidden" name="entity" id="entity" value="notary">

		<div class="buttonsContainer" style="height:50px;">
		
			<input type="button" name="pedir" id="pedir" value="Pedir" onclick="obtenerChofer();">
		</div>
		
		<div>
		
			<c:choose>			
				<c:when test="${chofer != null}">
					<div class="grid_14 alpha omega">
						Su chofer asignado es: ${chofer}  <br>			
						Tiempo estimado: ${tiempo} minutos
					</div>
				</c:when>
				<c:otherwise>
					<c:choose>		
					<c:when test="${error != null}">
						No hay choferes disponibles en este momento.
					</c:when>
					
					</c:choose>
				</c:otherwise>							
			</c:choose>	
		</div>
		
		<div id="outputDiv"></div>
		
		<p>
		
		<div id="map" style="height:250px;width:700px;display:noness;"></div>
				
	</form>	

</t:template>